$(function () {
	const chinaDate = time => {
		const addZero = time => time < 10 ? '0' + time : time;
		let date = new Date(time);
		let year = date.getFullYear();
		let month = addZero(date.getMonth() + 1);
		let day = addZero(date.getDate());
		let h = addZero(date.getHours());
		let m = addZero(date.getMinutes());
		let s = addZero(date.getSeconds());
		return `${year}-${month}-${day} ${h}:${m}:${s}`;
	}

	let query = {
		pagenum: 1, // 页码值，默认请求第一页的数据
		pagesize: 2, // 每页显示几条数据，默认每页显示2条
		cate_id: '', // 文章分类的 Id
		state: '' // 文章的发布状态
	}

	const initArticleList = (data = { pagenum: 1, pagesize: 10 }) => {
		$.ajax({
			url: '/my/article/list',
			method: 'get',
			data: data,
			success: res => {
				if (res.status != 0) return layer.msg('获取文章列表失败');
				let list = [];
				$.each(res.data, function (i, item) {
					list.push(`
						<tr>
							<td>${item.title}</td>
							<td>${item.cate_name}</td>
							<td>${chinaDate(item.pub_date)}</td>
							<td>${item.state}</td>
							<td>
								<button type="button" class="layui-btn layui-btn-xs edit" data-id="${item.Id}">编辑</button>
								<button type="button" class="layui-btn layui-btn-danger layui-btn-xs del" data-id="${item.Id}">删除</button>
							</td>
						</tr>
					`);
				});
				$('.layui-table tbody').empty().append(list.join(''));
				renderPage(res.total);
			}
		});
	}

	let laypage = layui.laypage;
	const renderPage = total => {
		// 调用 laypage.render() 方法来渲染分页的结构
		laypage.render({
			elem: 'pageBox', // 分页容器的 id
			count: total, // 总数据条数
			limit: query.pagesize, // 每页显示几条数据
			curr: query.pagenum, // 设置默认被选中的分页
			layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
			limits: [2, 3, 5, 10],
			// 分页发生切换的时候，触发 jump 回调
			// 触发 jump 回调的方式有两种：
			// 1. 点击页码的时候，会触发 jump 回调
			// 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
			jump: function (obj, first) {
				// 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
				// 如果 first 的值为 true，证明是方式2触发的
				// 否则就是方式1触发的
				// 把最新的页码值，赋值到 query 这个查询参数对象中
				query.pagenum = obj.curr;
				// 把最新的条目数，赋值到 query 这个查询参数对象的 pagesize 属性中
				query.pagesize = obj.limit;
				// 根据最新的 query 获取对应的数据列表，并渲染表格
				// initTable()
				if (!first) {
					initArticleList(query);
				}
			}
		});
	}
	initArticleList(query);

	let form = layui.form;
	const initArticleCate = () => {
		$.ajax({
			url: '/my/article/cates',
			method: 'get',
			success: res => {
				if (res.status != 0) return layer.msg(res.message);
				let cate = ['<option value="">所有分类</option>'];
				$.each(res.data, function (i, item) {
					cate.push(`<option value="${item.Id}">${item.name}</option>`);
				});
				$('[name="cate_id"]').empty().append(cate.join(''));
				// 一定要记得调用 form.render() 方法
				form.render();
			}
		});
	}
	initArticleCate();

	$('#form-search').on('submit', e => {
		e.preventDefault();
		query.cate_id = $('#form-search [name="cate_id"]').val();
		query.state = $('#form-search [name="state"]').val();
		initArticleList(query);
	});

	$('.layui-table tbody').on('click', '.edit', function () {
		$.ajax({
			url: '/my/article/' + $(this).attr('data-id'),
			method: 'get',
			success: res => {
				localStorage.setItem('article', JSON.stringify(res));
				location.href = '/article/art_pub.html';
			}
		});
	});

	$('.layui-table tbody').on('click', '.del', function () {
		layer.confirm('确定删除? ', { 'icon': 3, 'title': '提示' }, index => {
			$.ajax({
				url: '/my/article/delete/' + $(this).attr('data-id'),
				method: 'get',
				success: res => {
					if (res.status != 0) return layer.msg(res.message);
					layer.msg(res.message);
					if ($('.del').length === 1) {
						query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1;
					}
					initArticleList(query);
					layer.close(index);
				}
			});
		});
	});
});